<template>
    <div>
        <h1 style="text-align: center">附属品</h1>


        <div class="container">
           <div class="btn-div">
               <el-button type="primary" class="btn" @click="addVisable=true">添加</el-button>
               <el-button type="primary" class="btn" @click="deleteIds">删除</el-button>
           </div>
            <el-table
                    class="table"
                    :data="pageData"
                    border
                    style="width: 61%"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column
                        fixed
                        align="center"
                        type="selection"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                        width="230">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建日期"
                        width="258">
                </el-table-column>

            </el-table>
        </div>
        <el-dialog
                title="添加附件信息"
                :visible.sync="addVisable"
                width="30%"
                :before-close="handleClose">
            <div>
                <el-form ref="addAccessoryForm" :model="addData" label-width="100px" :rules="rules">
                    <el-form-item label="附属品名称" prop="name">
                        <el-input v-model="addData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="价格" prop="price">
                        <el-input v-model="addData.price"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisable = false">取 消</el-button>
                <el-button type="primary" @click="submitAdd">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import {getAllAccessory, addAccessory, deleteFruits, deleteAccessory,} from "../api/require";

    export default {
        name: "AccessoryModel",
        data(){
            return{
                id:'',
                pageData:[],
                multipleSelection:[],
                addVisable:false,
                addData:{
                    name:'',
                    price:'',
                },
                rules: {
                    name: [{ required: true, message: '请输入附属品名称', trigger: 'blur' }],
                    price: [{ required: true, message: '请输价格', trigger: 'blur' }],
                },
            }
        },
        created() {
            // console.log("页面的id",this.$route.params.id)
            this.id = this.$route.params.id;
            this.getPageData(this.id)

        },
        methods:{
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getPageData(id){
                getAllAccessory(id).then(res=>{
                    console.log(res)
                    this.pageData = res.data.obj
                }).catch(_=>{
                    this.$message({message:"系统错误",type:'error'})
                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            submitAdd(){
                this.$refs.addAccessoryForm.validate((valid)=> {
                    if (valid) {
                        this.addData.fruitId = this.id
                        addAccessory(this.addData).then(res=>{
                            if (res.data.code === 200){
                                this.$message({message:"添加成功",type:'success'});
                                this.getPageData(this.id)
                            }else{
                                this.$message({message:"添加失败",type:'success'})
                            }
                            this.resetAddForm()
                            this.addVisable = false;
                        })
                    }else{
                        this.$message({message:'数据格式有误',type:"error"})
                    }

                })
            },
            resetAddForm(){
                this.addData={
                    name:'',
                        price:'',
                }
            },
            deleteIds(){
               // const ids =  this.multipleSelection.map(item=>{
               //      return item.accessoryId
               //  });
                let ids = '?';
                this.multipleSelection.forEach(item => {
                    ids += 'ids=' + item.accessoryId + '&';
                })
                console.log("删除数组",ids)
                if (this.multipleSelection.length > 0){
                    this.$confirm(`确定删除这${this.multipleSelection.length}条？`).then(res=>{
                        /*删除*/
                        console.log('删除')
                        deleteAccessory(ids).then(res=>{
                            if (res.data.code === 200){
                                this.$message({message:"删除成功",type:'success'})
                                this.getPageData(this.id);
                            }else{
                                this.$message({message:"删除失败",type:"error"})
                            }
                        }).catch(_=>{
                            this.$message({message:"系统有误",type:"error"})
                        })
                    }).catch(_=>{})
                }else{
                    this.$message({message:"至少选择一条",type:'error'})
                }

            }
        }

    }
</script>

<style scoped lang="scss">
   .container{
     width: 100%;

       .btn-div{
           width: 61%;
           margin: 0 auto 10px auto;
           /*background: orangered;*/
           .btn{
               width: 120px;
               margin-right: 20px;
           }
       }
      .table{
          position: relative;
          left: 50%;
          transform: translateX(-50%);
      }
   }

</style>
